import React, { Component } from 'react'
import {BrowserRouter as Router, Switch, Route, Link, withRouter} from 'react-router-dom'
// import logo from '../../Login/images/logo.png'
import menuList from '../../config/menuConfig'
import 'antd/dist/antd.css'
import './index.css'
import { Menu } from 'antd';
import Home from '../../Home/Home'
import {
  AppstoreOutlined,
  BankOutlined,
  CommentOutlined,
  BlockOutlined,
  HighlightOutlined,
  TeamOutlined,
  KeyOutlined,
  DeploymentUnitOutlined,
  AuditOutlined,
  RedditOutlined
} from '@ant-design/icons';

const { SubMenu } = Menu;

// 左侧导航组件
class LeftNav extends Component {
    state = {
        collapsed: false,
    };

    toggleCollapsed = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    
    render() {
        const selectKey = this.props.location.pathname
        return (
            <div className='left-nav'>
                
                <Link className="left-nav-link" to='/home'>
                    <h2 style={{marginLeft:70}}>独&nbsp;白</h2>
                </Link>

                <Menu
                    defaultSelectedKeys={[selectKey]}
                    defaultOpenKeys={['/home']}
                    mode="inline"
                    theme="wheat"
                    // inlineCollapsed={this.state.collapsed}
                    style={{opacity:0.5,fontSize:16,fontFamily:'宋体'}}
                >
                    <Menu.Item key="/home" icon={<BankOutlined />}>
                        <Link to='/home'>
                            <span>首&nbsp;&nbsp;页&nbsp;&nbsp;</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="/recommend" icon={<AppstoreOutlined />}>
                        <Link to='/recommend'>
                            <span>推荐管理</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="/type" icon={<TeamOutlined />}>
                        <Link to='/type'>
                            <span>诗词分类</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="/poem" icon={<HighlightOutlined />}>
                        <Link to='/poem'>
                            <span>诗词管理</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="/author" icon={<CommentOutlined />}>
                        <Link to='/author'>
                            <span>诗人管理</span>
                        </Link>
                    </Menu.Item>
                    <SubMenu key="/games" icon={<BlockOutlined />} title="游戏管理" >
                        <Menu.Item key="/games/chain" icon={ <DeploymentUnitOutlined />}><Link to='/games/chain'>诗词接龙</Link></Menu.Item>
                        <Menu.Item key="/games/fly" icon={ <AuditOutlined />}><Link to='/games/fly'>飞花令</Link></Menu.Item>
                        <Menu.Item key="/games/word" icon={ <AuditOutlined />}><Link to='/games/word'>点字成诗</Link></Menu.Item>
                    </SubMenu>
                    <Menu.Item key="/user" icon={<RedditOutlined />}>
                        <Link to='/user'>
                            <span>用户管理</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="/role" icon={<KeyOutlined />}>
                        <Link to='/role'>
                            <span>管 理 员</span>
                        </Link>
                    </Menu.Item>
                </Menu>
                
            </div>
        )
    }
}

export default withRouter(LeftNav)